본문으로 건너뛰기

defaultProps

defaultProps란?​

React 컴포넌트에서는 Props를 사용하여 컴포넌트에 데이터를 전달합니다. 하지만, 특정 Props가 전달되지 않을 때 기본값을 설정하고 싶을 때가 있습니다. 이때 사용하는 것이 defaultProps입니다. defaultProps를 설정하면, 컴포넌트가 Props를 받지 못한 경우 자동으로 기본값을 사용하게 되어 에러를 방지하고 컴포넌트의 안정성을 높일 수 있습니다.

defaultProps 설정 방법​

함수형 컴포넌트와 클래스형 컴포넌트에서 defaultProps를 설정하는 방법을 각각 살펴보겠습니다.

함수형 컴포넌트에서의 defaultProps 설정​

함수형 컴포넌트에서는 컴포넌트 이름 뒤에 defaultProps를 설정합니다.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.defaultProps = {
  name: 'World',
};

위의 예제에서 Greeting 컴포넌트는 name Props가 주어지지 않으면 기본값으로 'World'를 사용합니다.

클래스형 컴포넌트에서의 defaultProps 설정​

클래스형 컴포넌트에서도 마찬가지로 컴포넌트 이름 뒤에 defaultProps를 설정합니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Greeting.defaultProps = {
  name: 'World',
};

여기서도 Greeting 컴포넌트는 name Props가 주어지지 않으면 기본값으로 'World'를 사용합니다.

defaultProps 사용 시 주의할 점​

  • 명확한 기본값 설정: 기본값은 명확하고 직관적으로 설정해야 합니다. 불명확한 기본값은 오히려 혼란을 줄 수 있습니다.
  • 불필요한 설정 피하기: 모든 Props에 대해 기본값을 설정할 필요는 없습니다. 꼭 필요한 경우에만 설정하여 코드의 복잡성을 줄입니다.
  • PropTypes와 함께 사용: 기본값을 설정할 때 PropTypes를 함께 사용하면 타입을 확인할 수 있어 더욱 안정적인 코드를 작성할 수 있습니다.

PropTypes와 defaultProps 함께 사용하기​

PropTypes는 Props의 타입을 검사하여 잘못된 Props가 전달되는 것을 방지해줍니다. PropTypes와 defaultProps를 함께 사용하면 컴포넌트의 신뢰성을 높일 수 있습니다.

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string,
};

Greeting.defaultProps = {
  name: 'World',
};

위 예제에서 name Props는 문자열이어야 하며, 기본값으로 'World'를 사용합니다. 만약 다른 타입의 값이 전달되면 콘솔에 경고 메시지가 출력됩니다.

더 알아보기​

  • PropTypes: Props의 타입을 확인하고 에러를 방지할 수 있습니다.
  • 함수형 컴포넌트와 클래스형 컴포넌트: 각 컴포넌트의 특징과 사용법을 비교해보세요.
  • Props와 State의 차이: Props와 State는 React에서 중요한 개념입니다. 차이점을 이해하는 것이 중요합니다.

내용 요약과 다음 주제​

defaultProps는 컴포넌트가 Props를 받지 못했을 때 기본값을 설정하는 방법입니다. 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 사용할 수 있으며, PropTypes와 함께 사용하면 더욱 안정적인 코드를 작성할 수 있습니다. 다음 주제인 useEffect 소개와 라이프사이클 제어에서는 React의 주요 훅 중 하나인 useEffect에 대해 알아보고, 컴포넌트의 라이프사이클을 효과적으로 제어하는 방법을 설명합니다.